<template>
	<div class="title-menu">
		<Item :isActive="isActive" @active="$emit('active')">
			<div class="inner">
				<div class="left">
					<!-- 具名插槽：创建了一个名为title的插槽，用于接收App.vue传来的值 -->
					<slot name="title"></slot>
				</div>
				<div class="right">
					<!-- 具名插槽：创建了一个名为icon的插槽，用于接收App.vue传来的值 -->
					<slot name="icon"></slot>
				</div>
			</div>
		</Item>
	</div>
</template>

<script>
	import Item from "./Item.vue" //导入组件
	export default {
		components: {
			Item //注册组件
		},
		props: {
			isActive: {
				type: Boolean,
				default: false //默认是false
			}
		}
	}
</script>

<style scoped>
	.title-menu {
		width: 100%;
		height: 46px;
		line-height: 46px;
	}

	.inner {
		padding: 0 20px;
	}

	.left {
		float: left;
		color: #212121;
		font-weight: 500;
		font-size: 16px;
	}

	.right {
		float: right;
		font-size: 12px;
		color: #999;
	}
</style>
